<template>
  <Layout>
    <h1>社交圈</h1>
    <el-card shadow="never" style="min-height: 400px;margin-bottom: 20px;padding: 0px 0px 20px 0px">
      <el-tabs v-model="activeTab" type="card" @tab-click="onSelect">
        <el-tab-pane name="followers" style="padding: 5px" label="关注">
          <div>
            <div>
              <el-row style="min-height: 200px; ">
                <el-col :span="8" v-for="(item,index) in followers" :key="'followers'+index" style="padding: 10px">
                  <el-card shadow="hover" style="font-size: 13px;color: #606266;line-height: 20px">
                    <i class="el-icon-star-off"></i>&emsp;
                    <a @click="$router.push(`/user/social/details/${item.name}`)" style=" text-decoration:none;cursor:pointer">{{item.name}}</a>
                    <br>
                    <i class="el-icon-message"></i>&emsp;
                    <a :href="item.htmlUrl" target="_blank" style=" text-decoration:none;cursor:pointer">TA的主页</a>
                    <br>
                    <img :src="item.avatarUrl" style="width: 100%;border-radius:5px;margin-top: 5px">
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="following" style="padding: 5px" label="粉丝">
          <div>
            <div>
              <el-row style="min-height: 200px; ">
                <el-col :span="8" v-for="(item,index) in following" :key="'following'+index" style="padding: 10px">
                  <el-card shadow="hover" style="font-size: 13px;color: #606266;line-height: 20px">
                    <i class="el-icon-star-off"></i>&emsp;
                    <a @click="$router.push(`/user/social/details/${item.name}`)" style=" text-decoration:none;cursor:pointer">{{item.name}}</a>
                    <br>
                    <i class="el-icon-message"></i>&emsp;
                    <a :href="item.htmlUrl" target="_blank" style=" text-decoration:none;cursor:pointer">TA的主页</a>
                    <br>
                    <img :src="item.avatarUrl" style="width: 100%;border-radius:5px;margin-top: 5px">
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </Layout>
</template>

<page-query>
query{
  allSocial{
    edges{
      node{
        name
        avatarUrl
        htmlUrl
      }
    }
  }

  allSocialgz{
    edges{
      node{
        name
        avatarUrl
        htmlUrl
      }
    }
  }
}
</page-query>

<script>
export default {
  metaInfo: {
    title: '社交圈'
  },
  data(){
    return {
      activeTab:"followers"
    }
  },
  computed: {
    followers() {
      return this.$page.allSocial.edges.map(v => v.node)
    },
    following(){
      return this.$page.allSocialgz.edges.map(v => v.node)
    }
  },
  methods:{
    onSelect(){
      if(this.activeTab === "followers") this.activeTab = "following"
      if(this.activeTab === "following") this.activeTab = "followers"
    }
  }
}
</script>
